<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子</title>
		<style>
			img{
				/*外边距margin属性*/
				border: 1px solid skyblue;
				/*margin属性*/
				margin: 200px;
				/*margin 2个属性值  顺时针  上下左右*/
				margin: 10px  20px;
				/*常用：盒子自适应居中*/
				/*自适应居中必须设置宽度*/
				width: 50%;
				margin: 0 auto ;
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型 四部分组成 所有元素都存在与框模型中
	                 外边距	 边框以外四周
		             边框
		             内边距   边框以内 与内容之间距离
		             内容  块  行  行内元素本身宽高
		 
		 -->
		<img src="img/f3ca41_10_Sunshine_4k.jpg" width="400px" height="400px" alt="风铃" />
		<span>行内元素：风铃</span>
	</body>
</html>